import { h, init } from "snabbdom"

import styles from "snabbdom/modules/style"
import classes from "snabbdom/modules/class"
import props from "snabbdom/modules/props"
import eventlisteners from "snabbdom/modules/eventlisteners"

let patch = init([styles, classes, props, eventlisteners])
let initData = [
    {
        index: 1,
        name: 'zhangsan',
        age: 19,
        elmHeight: 0
    },
    {
        index: 2,
        name: 'lisi',
        age: 29,
        elmHeight: 0
    },
    {
        index: 3,
        name: 'wangwu',
        age: 26,
        elmHeight: 0
    },
    {
        index: 4,
        name: 'xiatian',
        age: 16,
        elmHeight: 0
    },
    {
        index: 5,
        name: 'chunhua',
        age: 22,
        elmHeight: 0
    },
    {
        index: 6,
        name: 'dongmei',
        age: 20,
        elmHeight: 0
    }
]
let margin = 8
let totalHeight = 0

function getVnode(data) {
    let arrNode = []
    data.forEach((item, index) => {
        arrNode.push(
            h('div.row', {
                key: item.index,
                style: {
                    opacity: '0',
                    transform: 'translate(-200px)',
                    delayed: { transform: `translateY(${item.offset}px)`, opacity: '1' },
                    remove: { opacity: '0', transform: `translateY(${item.offset}px) translateX(200px)` }
                },
                hook: { insert: (vnode) => { item.elmHeight = vnode.elm.offsetHeight } }
            }, [
                h('div', {
                    style: {
                        'font-weight': 'bold'
                    }
                }, item.index),
                h('div', item.name),
                h('div', item.age),
                h('div.btn.rm-btn', {
                    on: {
                        click: [remove, item.index]
                    }
                }, 'X'),
            ])
        )
    });
    return arrNode
}

function render() {
    let arr = initData.reduce((acc, m) => {
        var last = acc[acc.length - 1]
        m.offset = last ? last.offset + last.elmHeight + margin : margin
        return acc.concat(m)
    }, [])
    console.log(arr);
    totalHeight = arr[arr.length - 1].offset + arr[initData.length - 1].elmHeight
    vnode = patch(vnode, view(arr))
}

var app = document.getElementById('app');

function view(list) {
    return h('div#app', [
        h('h1', 'Top 10 users'),
        h('div', {
            style: {
                display: 'flex',
                'justify-content': 'space-between'
            }
        }, [
            h('div', [
                h('span', 'Sort by :'),
                h('button', {
                    on: {
                        click: sortByNum
                    }
                }, 'number'),
                h('button', {
                    on: {
                        click: sortByName
                    }
                }, 'name'),
                h('button', {
                    on: {
                        click: sortByAge
                    }
                }, 'age')
            ]),
            h('div', {
                on: {
                    click: add
                }
            }, [
                h('button', 'add')
            ])
        ]),
        h('div.list', {
            style: { height: totalHeight + 'px' },
        }, getVnode(list))
    ])
}

function sortByNum(params) {
    initData = initData.sort((before, after) => {
        return before.index - after.index
    })
    render()
}
function sortByName(params) {
    initData = initData.sort((before, after) => {
        return before.name < after.name ? -1 : 1
    })
    render()
}
function sortByAge(params) {
    initData = initData.sort((before, after) => {
        return before.age - after.age
    })
    render()
}
function remove(params) {
    initData = initData.filter(v => {
        return v.index !== params
    })
    render()
}
function add() {
    initData = [{
        index: initData.length + 1,
        name: 'new',
        age: getRandomIntInclusive(16, 30),
        elmHeight: 0
    }].concat(initData)
    render()
    render()
}
function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}

let vnode = patch(app, view(initData));
render()


